@import "tailwindcss";

@theme {
  --color-text-color: #f3e5ab;
  --color-accent-color: #cccccc;
  --color-light-bg-color: #fafafa;
  --color-dark-bg-color: #242424;
  --font-display:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

@layer base {
  :root {
    font-family: var(--font-display);

    color-scheme: light dark;
    background-color: var(--color-dark-bg-color);
  }

  a:hover {
    color: var(--color-text-color);
  }
}

body {
  @apply m-0 min-w-[20rem];
}

@media (prefers-color-scheme: light) {
  :root {
    background-color: var(--color-light-bg-color);
  }

  a:hover {
    color: var(--color-text-color);
  }
}

main {
  @apply text-center p-[1em] my-0 mx-auto;
}

h3 {
  @apply text-text-color uppercase text-[1.5rem] font-extralight my-[2rem] mx-auto leading-[1.2rem];
}

a {
  @apply text-[.5rem] m-[.5rem] text-accent-color no-underline;
}
